/*
* @Description:可视化-不同节点分布时长
* @Author: lil
* @Date: 2021/11/27
**/
<template>
  <div>
    <div id="nodeDistributionBarChart" style="width:100%;height:220px"></div>
  </div>
</template>
<script>
  import {
    peerTimeInfo
  } from '@/api/blockchain/blockchainvisualization'
  export default {
    data() {
      return {
        myChart: '',
        colorData: '',
        peerNameData: [],
        peerTimeData: [],
      };
    },
    mounted() {
      this.drawLine();
      this.getAllPeerTimeInfo();
    },
    methods: {
      getAllPeerTimeInfo() {
        peerTimeInfo().then((res) => {
          this.peerNameData = [];
          this.peerTimeData = [];
          for (let i = 0; i < res.data.length; i++) {
            this.peerNameData.push(res.data[i].Name);
            this.peerTimeData.push(res.data[i].DistributeTime);

          }

          this.myChart.setOption({
            xAxis: [{
              data: this.peerNameData,
            }]
          });
          this.myChart.setOption({
            series: {
              type: 'bar',
              barWidth: 14,
              data: this.peerTimeData,
              itemStyle: {
                normal: {
                  color: this.colorData,
                  barBorderRadius: [10, 10, 0, 0]
                }
              }
            },
          });
        }).catch((err) => {
          console.log(err);
        });
      },

      drawLine() {
        this.myChart = this.$echarts.init(document.getElementById('nodeDistributionBarChart'));
        this.colorData = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#17b5f7'
        }, {
          offset: 1,
          color: '#394ff5'
        }]);

        this.myChart.setOption({
          grid: [{
            left: '7%',
            bottom: '10%',
            top: '15%',
            right: '1%'
          }],
          xAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(209,209,252,.4)'
              }
            },
            data: []
          },
          yAxis: {
            name: '天',
            type: 'value',
            minInterval: 1,
            nameTextStyle: {
              padding: [0, 0, 0, -25]
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(209,209,252,.4)'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#252c49'
              }
            }
          },
          series: []
        });
        window.onresize = () => {
          this.myChart.resize();
        }
      }
    },
  }

</script>
